<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <title>深入掌握CSS组件</title>
    <!--    Bootstrap核心css文件-->
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body class="container">
<h3 class="mb-4">媒体排列顺序</h3>
<ul class="list-unstyled">
    <li class="media">
        <img width="100" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592573032451&di=2d1958286ac142c26593cfe6e61eb3e3&imgtype=0&src=http%3A%2F%2Fwww.cflac.org.cn%2Fxw%2F201810%2FW020181008346545600505.jpg" alt="" class="mr-3">
    <div class="media-body">
        <h5 class="mt-0 mb-2">唐代诗人：李白</h5>
        李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在“清水出芙蓉，天然去雕饰”的自然美之中。
    </div>
    </li>
     <li class="media my-4">
        <img width="100" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1592573378532&di=acb26338d978bcdae5065689dc0a8e2e&imgtype=0&src=http%3A%2F%2Fs6.sinaimg.cn%2Fbmiddle%2Fa59dc024gx6DAHwOAcZ45%26690" alt="" class="mr-3">
    <div class="media-body">
        <h5 class="mt-0 mb-2">唐代诗人：杜甫</h5>
        在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为“诗史”。他的诗词以古体，律诗见长，风格多样，以“沉郁顿挫”四字准确概括出他自己的作品风格，而以沉郁为主。
    </div>
    </li>
     <li class="media">
        <img width="100" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=499383165,461925606&fm=26&gp=0.jpg" alt="" class="mr-3">
    <div class="media-body">
        <h5 class="mt-0 mb-2">宋代词人：李清照</h5>
        李清照出生于书香门第，早期生活优裕，其父李格非藏书甚富，她小时候就在良好的家庭环境中打下文学基础。所作词，前期多写悠闲生活，后期多悲叹身世，情调伤感。
    </div>
    </li>

</ul>


<!--引入js文件-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!--Bootstrap核心JavaScript文件-->
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>